<template>
  <body>
      <v-indexTop1></v-indexTop1>
      <div class="main-index">
      <div class="main">
        <div class="search-form">
          <el-input class="input" v-model="key_search" placeholder="请输入职位关键词：例如（Java开发）">
            <el-button class="search_btn" slot="append" @click="Retrieval" icon="el-icon-search"></el-button>
          </el-input>
          <dl class="hot-search">
            <dt>热门搜索:</dt>
            <dd>
              <a title="投资经理" href="https://www.liepin.com/zhaopin/?key=%E6%8A%95%E8%B5%84%E7%BB%8F%E7%90%86&amp;init=1&amp;d_sfrom=search_fp_bar">投资经理</a>
            </dd>
            <dd>
              <a title="土建工程师" href="https://www.liepin.com/zhaopin/?key=%E5%9C%9F%E5%BB%BA%E5%B7%A5%E7%A8%8B%E5%B8%88&amp;init=1&amp;d_sfrom=search_fp_bar">土建工程师</a>
            </dd>
            <dd>
              <a title="采购" href="https://www.liepin.com/zhaopin/?key=%E9%87%87%E8%B4%AD&amp;init=1&amp;d_sfrom=search_fp_bar">采购</a>
            </dd>
            <dd>
              <a title="销售" href="https://www.liepin.com/zhaopin/?key=%E9%94%80%E5%94%AE&amp;init=1&amp;d_sfrom=search_fp_bar">销售</a>
            </dd>
            <dd>
              <a title="运营" href="https://www.liepin.com/zhaopin/?key=%E8%BF%90%E8%90%A5&amp;init=1&amp;d_sfrom=search_fp_bar">运营</a>
            </dd>
            <dd>
              <a title="java" href="https://www.liepin.com/zhaopin/?key=java&amp;init=1&amp;d_sfrom=search_fp_bar">java</a>
            </dd>
            <dd>
              <a title="产品经理" href="https://www.liepin.com/zhaopin/?key=%E4%BA%A7%E5%93%81%E7%BB%8F%E7%90%86&amp;init=1&amp;d_sfrom=search_fp_bar">产品经理</a>
            </dd>
            <dd>
              <a title="人力资源" href="https://www.liepin.com/zhaopin/?key=%E4%BA%BA%E5%8A%9B%E8%B5%84%E6%BA%90&amp;init=1&amp;d_sfrom=search_fp_bar">人力资源</a>
            </dd>
            <dd>
              <a title="总经理" href="https://www.liepin.com/zhaopin/?key=%E6%80%BB%E7%BB%8F%E7%90%86&amp;init=1&amp;d_sfrom=search_fp_bar">总经理</a>
            </dd>
          </dl>
        </div>
        <div class="recomment">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="color:#00528c">
            <el-tab-pane label="推荐职位" name="first" style="color:#00528c"></el-tab-pane>
            <el-tab-pane label="今日精选" name="second" style="color:#00528c"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="prompt-tilte">
          <i class="el-icon-warning" style="color:#fec144"></i>
          <span>更精准职位推荐，为您准备中，先看看下面的内容吧!</span>
        </div>
        <p >{{remind}}</p>
        <ul>
          <li v-for="list in rec_lists" >
            <div class="job">
              <div class="job-info">
            <a class="info" href="javascript:;" @click="Jump(list.REC_pk)">

              <h1 >{{ list.REC_Name }}</h1>
              <p class="condition">
                <span class="text">{{list.REC_Wage}}  </span>
                <span class="area">|  {{list.REC_Address}} |</span>
                <span class="edu">  本科及以上  |</span>
                <span class="else">  经验不限</span>
              </p>

            </a>
          </div>
          <div class="company-info">
            <a class="co-info" href="">
              <p class="company-name">
                <span>{{list.RC_Name}}</span>
              </p>
              <p class="field">
                <span>{{list.RC_Label}}</span>
              </p>
              <p class="temptation">
                <span>五险一金</span>
                <span>弹性工作</span>
              </p>
            </a>
          </div>
        </div>
          </li>
          <li v-for="list in data_lists" >
            <div class="job">
              <div class="job-info">
            <a class="info" href="javascript:;" @click="Jump(list.REC_pk)">
              <h1 >{{ list.REC_Name }}</h1>
              <p class="condition">
                <span class="text">{{list.REC_Wage}}  </span>
                <span class="area">|  {{list.REC_Address}} |</span>
                <span class="edu">  本科及以上  |</span>
                <span class="else">  经验不限</span>
              </p>
            </a>
          </div>
          <div class="company-info">
            <a class="co-info" href="">
              <p class="company-name">
                <span>{{list.RC_Name}}</span>
              </p>
              <p class="field">
                <span>{{list.RC_Label}}</span>
              </p>
              <p class="temptation">
                <span>五险一金</span>
                <span>弹性工作</span>
              </p>
            </a>
          </div>
        </div>
          </li>
        </ul>
          <div  v-if="rec_lists">
          <div class="block">
            <br>
            <el-pagination
                background
                @size-change="handleSizeChange0"
                @current-change="handleCurrentChange0"
                :page-size="25"
                :pager-count="11"
                layout=" total, prev, pager, next, jumper"
                :total=total>
            </el-pagination>
            <br><br>
          </div>
          </div>
        <div  v-if="data_lists">
          <div class="block">
            <br>
            <el-pagination
                background
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :page-size="25"
                :pager-count="11"
                layout=" total, prev, pager, next, jumper"
                :total=total>
            </el-pagination>
            <br><br>
          </div>
          </div>
      </div>
      <div class="aside">
        <div class="box1">
          <div class="user-info">
            <div class="user-photo" v-if="img_url" >
              <img alt="用户头像" class="photo" :src="imgurl"  style="width: 84px;height: 84px">
            </div>
            <div class="user-photo" v-else >
              <img alt="用户头像" class="photo" :src="images.touxiang2" >
            </div>
            <div class="user-name">
              <h2>{{user_data.user_name}}</h2>
            </div>
            <div class="user-status">
              <p>
                <span title="地址">{{user_data.census}}</span>
                <span class="muted">|</span>
                <span title="工作经验">{{user_data.datelist}}</span>
              </p>
            </div>
          </div>
          <div class="credit">
            <h3>
              职场信用分：
              <span class="text-nu">474</span>
              <span class="position">
                击败
                <span class="text-nu">
                  22%
                </span>
                同行
              </span>
            </h3>
            <div class="progress">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="22" color="#f9835d"></el-progress>
            </div>
            <p class="progress-p">
              <a href="" class="progress-text">优化信用分，提升简历排名</a>
            </p>
          </div>
          <div class="user-menu">
            <ul class="clearfix">
              <div class="li-all">
                <li class="li-1">
                  <div class="tooltip">
                    <a href="" class="icon">
                      <i class="el-icon-refresh"></i>
                        <div class="icon-t">
                          <span class="icon-text">新刷简历</span>
                        </div>
                    </a>
                  </div>
                </li>
                <li class="li-2">
                  <div class="tooltip">
                    <router-link tag="a" class="icon" :to="{path:'/resumeShow'}">
                      <i class="el-icon-edit-outline"></i>
                        <div class="icon-t">
                          <span class="icon-text">编辑简历</span>
                        </div>
                    </router-link>
                  </div>
                </li>
                <li class="li-3">
                  <div class="tooltip">
                    <router-link tag="a" class="icon" :to="{path:'/SubmitResumePage'}">
                      <i class="el-icon-setting"></i>
                        <div class="icon-t">
                          <span class="icon-text">已投递岗位</span>
                        </div>
                    </router-link>
                  </div>
                </li>
                <li class="li-4">
                  <div class="tooltip">
                   <router-link tag="a" :to="{path:'/resumeDisplay'}">
                      <i class="el-icon-edit"></i>
                        <div class="icon-t">
                          <span class="icon-text">查看简历</span>
                        </div>
                  </router-link>
                  </div>
                </li>
              </div>
            </ul>
          </div>
        </div>
        <div class="box2">
          <a href="" target="_bank" title="成为金卡会员，享求职特权">提升简历曝光 为求职助力 ></a>
        </div>
        <div class="box3">
          <div class="box-title">
            <em class="icons16 icons16-secret"></em>
            <strong>隐私设置</strong>
          </div>
          <div class="choce">
            <span class="choce-title">求职简历:</span>
            <el-select v-model="region1" placeholder="开放简历">
              <el-option label="开放简历" value="开放简历"></el-option>
              <el-option label="仅猎头可见" value="仅猎头可见"></el-option>
              <el-option label="仅企业可见" value="仅企业可见"></el-option>
              <el-option label="隐藏简历" value="隐藏简历"></el-option>
              <el-option label="更多隐私设置" value="更多隐私设置"></el-option>
            </el-select>
          </div>
          <div class="choce">
            <span class="choce-title">手机保护:</span>
            <el-select v-model="region2" placeholder="关闭">
              <el-option label="开启" value="开启"></el-option>
              <el-option label="关闭" value="关闭"></el-option>
              <el-option label="更多隐私设置" value="更多隐私设置"></el-option>
            </el-select>
          </div>
        </div>
        <div class="box4">
          <div class="box4-title">
            <strong>近期谁看过我的简历</strong>
          </div>
          <table>
            <tbody>
              <tr class="review-resume">
                <td class="fang">
                  <em>
                    <a target="_bank" href="">0</a>
                  </em>
                </td>
                <td class="review-td">
                  <span>
                    <a target="_blank" href="">0个猎头/HR查看过</a>
                    <p class="muted">新刷简历能增加被查看概率</p>
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="box5">
          <div class="box4-title">
            <strong>每日投递简历的数量</strong>
          </div>
          <table>
            <tbody>
              <tr class="review-resume">
                <td class="fang">
                  <em>
                    <a target="_bank" href="">0</a>
                  </em>
                </td>
                <td class="review-td1">
                  <span>
                    <a target="_blank" href="">今日已投递0个职位</a>
                    <p class="muted">每日最多可头50个职位</p>
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
      </div>

  </body>
</template>

<script>
import indexButtom from "./assemblyPublic/Index-buttom";
import indexTop1 from './assemblyPublic/Index-top1';
export default {
  data(){
    return{
        activeIndex:'1',
        activeName:'',
        region1:'',
        region2:'',
        key_search:'',
        data_lists:'',
        user_data:'',
        remind:'',
        total:'',
        page_num :'',
        rec_lists: '',
        img_url:'',
        images:{
          touxiang2: require('../assets/img/touxiang2.png'),
          app_jpg: require('../../static/images/app.jpg'),
          use_png: require('../../static/images/use.png'),
        }
    }
  },
  mounted:function (){
      this.user_info();
      this.rec_operate();
  },
  methods:{
    Jump(pk){
      this.$session.set('red_id',pk);
      this.$router.push({
        name:'Detailspage',
        params:{
          rec_id : pk
        }
      })
    },
    handleSizeChange0(val) {
        console.log(val);
    },
    handleCurrentChange0(val) {
        console.log(val);
        this.page_num = val;
      console.log(this.page_num);
        this.$axios({
          method: "POST",
          url: "api/rec_operate",
          data: {
            page_num:this.page_num,
          }
        })
        .then((result) => {
          console.log(result.data);
          this.rec_lists = result.data.data_json;
          // this.page_num = val;
          this.total = result.data.total
        })
    },
    handleSizeChange1(val) {
        console.log(val);
    },
    handleCurrentChange1(val) {
       console.log(val);
       this.page_num = val - 1;
       if (this.key_search){
          this.$axios({
            method: "POST",
            url: "api/search",
            data: {
              search_txt: this.key_search,
              page_num: this.page_num,
            }
          })
          .then((result) => {
             if (result.data.data_case == 'ok'){
                  this.data_lists = result.data.data_list;
                  this.total = result.data.total;
                  this.remind = '';
                  this.rec_lists = ''
                // location.reload();
             }else {
               this.remind = '没有更多了.....';
               this.data_lists = '';
               this.rec_lists = '';

             }
          })
       }

    },
    handSelect(key, keyPath){
      console.log(key, keyPath);
    },
    handleClick(tab, event){
      console.log(tab, event);
    },
    rec_operate(){

      this.$axios({
        method: "POST",
        url: "api/rec_operate",
        data: {
          page_num:this.page_num,
        }
      })
      .then((result) => {
        console.log(result.data);
        this.rec_lists = result.data.data_json;
        // this.page_num = result.data.page_num;
        this.total = result.data.total
      })
    },
    user_info() {
      this.$axios({
        method: "POST",
        url: "api/user_info",
        data: {
          phone_num: this.$session.get('userPhone'),
        }
      }).then((result) => {
        console.log(result.data);
        this.user_data = result.data;
        if (result.data.img_url =='#'){
          this.img_url = false
        }else {
          this.img_url = true
        }
      })
    },
    Retrieval(){
      if (this.key_search){
        this.$axios({
          method: "POST",
          url: "api/search",
          data: {
            search_txt: this.key_search,
            page_num : this.page_num,
          },
          })
        .then((result) => {
           if (result.data.data_case == 'ok'){
                this.data_lists = result.data.data_list;
                this.total = result.data.total;
                this.remind = '';
                this.rec_lists = ''
              // location.reload();
           }else {
             this.remind = '没有更多了.....';
             this.data_lists = '';
             this.rec_lists = '';
           }
        })
      }
    }
  },
  computed:{
     imgurl: function () {
          return require('../../../SPI_Django/media/'+String(this.user_data.user_id)+'/img/HeadPortrait.jpg')
        }
  },
  components: {
    "v-indexButtom":indexButtom,
    "v-indexTop1" : indexTop1,
  },

}
</script>

<style scoped>
body{
    width: 100%;
    height: 100%;
    background-color:#f0f0f0;
  }
.link-menu-list{
    width: 10%;
    margin-left: 60%;
}
.is-student{
    width: 100%;
    font-size: 16px;
    margin-top: 11%;
    margin-left: 280%;
}
.sdn_buttom{
      width: 100%;
    height: 500px;
    color: rgb(0, 0, 0);
    margin-top: 65%;
    font-size: 12px;
    margin-bottom: 30px;
}
.minixFace{
  margin-top: -16%;
  margin-left: 380%;
  width: 80px;
}
.minixFace img{
  border-radius: 50%;
}
.minixFace a{
  text-align: center;
  font-size: 18px;
  line-height: 25px;
}
.el-menu{
  margin-left: 25.5%;
}
.daohang{
  width: 100%;
  border-width:0;
  background-color: rgb(84, 92, 100);
}
.search-form{
  width: 73%;
  height: 140px;
  margin-left: 25.5%;
  margin-top: 2%;
  background-color: #fff;
  border: 1px solid #d9d9d9;
}
.main-index{
  width:1600px; margin:0 auto; margin-buttom:20px;
}
.input{
  width: 80%;
  margin-top: 5%;
  margin-left: -9%;
}
.hot-search {
    width: 100%;
    float: left;
    color: #999;
    padding-top: 9px;
    font-size: 14px;
    margin-top: 3%;
}
dt{
  float: left;
  margin-left: 6%;
}
dd{
  float: left;
  margin-left: 2%;
}
dd a{
    color: #666;
    font-size: 14px;
}
.recomment{
  width: 73%;
  margin-top: 1%;
  margin-left: 25.5%;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  font-size: 18px;
  color:#00528c;
}
#tab-first,#tab-second{
    font-size:18px;
    color:#00528c;
}
.el-tabs{
    margin-left:6%;
    color:#00528c;
    font-size:18px;
}
.prompt-tilte{
    margin-top: 1%;
    margin-left: -5%;
    color: #666;
    font-size: 12px;
}
.job{
  width: 73%;
  height: 140px;
  margin-left: 25.5%;
  margin-top: 1%;
  background-color: #fff;
  border: 1px solid #d9d9d9;
}
.main{
  width: 70%;
  float: left;
}
h1{
  margin-left:4%;
  color: #3d9ccc;
  font-size: 18px;
  text-align: left;
}
.condition{
  margin-top:1%;
  margin-left:4%;
  text-align: left;
}
.text{
  font-size: 15px;
  color:#ff6600;
}
.area,.edu{
  font-size: 15px;
  color: #666;

}
.all{
  width: 100%;
}
.else{
  font-size: 15px;
  color: #666;
}
.company-info{
  width: 41%;
  height: 60%;
  margin-top:-8%;
  margin-left:56%;
  border-left: dotted 1px #666;
}
.company-name{
  color:#000;
  margin-left: 5%;
  text-align: left;
}
.field{
  color: #666;
  margin-top:5%;
  margin-left: 5%;
  text-align: left;
}
.temptation span{
    float: left;
    padding: 2px 10px;
    border: 1px solid #e1f2fa;
    margin-right: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    background-color: #edf9ff;
    color: #3d9ccc;
    margin-top: 5%;
    margin-left: 5%;
}
.aside{
    height: 100%;
    width: 30%;
    float: right;
    margin-top: 20px;
}
.box1{
  width: 70%;
  height: 300px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
}
.photo{
  width: 25%;
  margin-top: 10%;
  margin-left: -60%;
}
.user-name{
  font-size:14px;
  margin-top:-18%;
}
.user-status{
  font-size: 12px;
  margin-top: 2%;
  margin-left: 14%;
}
.credit{
  margin-top: 6%;
}
h3{
  font-size: 15px;
  font-weight: normal;
  margin-left: -12%;
}
.text-nu{
  color:#ff6600;
}
.position{
  font-size:12px;
  margin-left: 5%;
}
.user-photo{
}
.el-progress{
  width:83%;
  margin-top: 3%;
  margin-left: 7%;
}
.progress-p{
  margin-top:4%;
  margin-left: -11%;;
}
.progress-text{
  color: #f64;
  text-decoration: underline;
}
.user-menu{
  width: 82%;
  margin-top:8%;
  margin-left: 7%;
  border-top: solid 1px #999;
}
.clearfix{
  width: 110%;
  margin-top: 755px;
}
.clearfix li{
  width: 30%;
  height: 50px;
  margin-top:-250%;
  float: left;
}
.li-1{
  margin-left: -5%;
}
.li-2{
  margin-left: 20%;
}
.li-3{
  margin-left:43%;
}
.li-4{
  margin-left:65%;
}
.tooltip{
  width: 100%;
  height: 40px;
}
.icon{
  margin-top: -3%;
}
.el-icon-refresh,.el-icon-edit-outline,.el-icon-setting,.el-icon-edit{
  width: 100%;
  height: 100%;
  font-size: 28px;
  color:#3d9ccc;
  margin-top: 10%;
}
.icon-t{
  margin-top: -19%;
}
.job-info{
  margin-top: 5%;
}
.icon-text{
  font-size: 12px;
  color: #000;
}
.box2{
  width: 70%;
  height: 35px;
  line-height: 35px;

  margin-top: 1%;
  background-color:#ff8250;
}
.box2 a{
  color: #fff;
}
.box3{
  width: 70%;
  height: 140px;

  margin-top: 1%;
  background-color: #fff;
  border:solid 1px #d9d9d9;
}
.box-title{
  width: 50%;
  margin-top: 2%;
  margin-left: -10%;
}
.choce{
  margin-top: 3%;
}
.choce-title{
  font-size: 14px;
  margin-top: 3%;
  margin-left:-10%;
}
.el-select{
  width: 60%;
}
.box4{
  width: 70%;
  height: 110px;

  margin-top: 1%;
  background-color: #fff;
  border:solid 1px #d9d9d9;
}
.box4-title{
  width: 60%;
  margin-top: 3%;
  margin-left: 3%;
  border-left: 3px solid #3d9ccc;
}
table{
  margin-top: 8%;
  margin-left: 5%;
}
td{
  background-color:#f0f0f0;
}
em a{
  font-size: 18px;
  color: #00528c;
}
td.review-td{
  background-color: white;
}
.review-td a{
  margin-left: -27%;
  color: #00528c;
  font-size: 13px;
}
.muted{
  font-size: 13px;
  color: #666;
}
.fang{
  width: 30%;
}
.box5{
  width: 70%;
  height: 110px;

  margin-top: 1%;
  background-color: #fff;
  border:solid 1px #d9d9d9;
}
.review-td1{
  background-color: white;
}
.review-td1 a{
  margin-left: -16%;
  color: #00528c;
  font-size: 13px;
}

.goldcard-box img{
  margin-top:-25%;
}

</style>
